<style scoped>
.chat {
  width: 750px;
  margin: 10px auto;
}
.message-list {
  height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 15px;
  border: solid 2px #ddd;
}
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.el-card {
  margin-bottom: 15px;
  animation-name: slideInUp;
  animation-duration: 1s;
  animation-fill-mode: both;
}
.name {
  color: #20a0ff;
}
.name.system {
  color: #999;
}
.time {
  float: right;
  font-size: 85%;
  color: #bbb;
}
.mine .name {
  float: right;
  color: #ff4949;
}
.mine .time {
  float: none;
}
</style>

<template>
  <div class="chat">
    <div class="message-list">
      <div>
        <el-card v-for="item in messageList" :key="item.Message" :class="{mine:item.Name === name}">
          <div slot="header">
            <span class="name" :class="{system:item.IsSystem}">{{item.Name === name ? '我' : item.Name}}</span>
            <span class="time">{{item.Time | time('yyyy-MM-dd hh:mm:ss')}}</span>
          </div>
          <div v-html="item.Message"></div>
        </el-card>
      </div>
    </div>
    <div class="message-action">
      <el-input type="textarea" v-model="message" style="margin-bottom:8px"></el-input>
      <el-button type="primary" @click="handleSend">发送</el-button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import { loadScript } from '../utils'
export default {
  name: 'Chat',
  data() {
    return {
      chatId: '',
      message: '',
      messageList: [],
      messageHub: {}
    }
  },
  computed: {
    name() {
      return this.$route.params.name
    }
  },
  mounted() {
    let scripts = [
      {
        id: 'jquery',
        src: '/static/js/jquery.min.js'
      },
      {
        id: 'signalR',
        src: '/static/js/jquery.signalR.min.js'
      },
      {
        id: 'signalRhub',
        src: 'http://localhost:28680/signalr/hubs'
      }
    ]
    loadScript(scripts).then(() => {
      let conn = $.connection.hub
      //$.connection.hub.logging = true
      conn.url = 'http://localhost:28680/signalr'

      var messageHub = $.connection.chat
      let _this = this
      messageHub.client.message = function(msg) {
        msg.Time = new Date(msg.Time)
        _this.messageList.push(msg)
        $('.message-list').animate(
          {
            scrollTop: _this.messageList.length * 130 - 300
          },
          200
        )
      }
      conn.start().done(function() {
        messageHub.server.login(_this.name)
        messageHub.server.list().then(json => {
          _this.messageList = _this.messageList.concat(json)
          $('.message-list').animate(
            {
              scrollTop: _this.messageList.length * 130 - 300
            },
            200
          )
        })
        _this.chatId = conn.id
      })
      this.messageHub = messageHub
    })
  },
  methods: {
    handleSend() {
      this.messageHub.server.send(this.name, this.message)
      this.message = ''
      //   let _this = this
      //   $.ajax({
      //     url: 'http://localhost:2926/message/send',
      //     data: { id: _this.chatId, message: _this.message },
      //     type: 'POST',
      //     success: function() {
      //       _this.message = ''
      //     }
      //   })
    }
  }
}
</script>
